
import React, { Component } from "react";
import { Carousel, Card, Typography, Divider, Statistic, Tabs, List, Avatar, Space, Select, Tag, Badge,
   Button, Row, Col, Progress, Image  } from 'antd';
import { s } from '../../assets/images/111.jpeg'
import styles from './environment.css';
import { ArrowUpOutlined, ArrowDownOutlined, ExperimentOutlined, PieChartOutlined, CloudOutlined, LikeFilled, 
         StarFilled, StarOutlined, TrophyOutlined, LikeOutlined, MessageFilled, HistoryOutlined} from '@ant-design/icons';
import Breadcrumbs from "../../components/component/Breadcrumb/breadcrumb";
import echarts from 'echarts/lib/echarts';
import {dateFormater} from '../../utils/utils'
import ReactEcharts from 'echarts-for-react';
const { TabPane } = Tabs;
const { Option } = Select;
const contents ={
  width:'90%',
  margin:'0 auto'
}
const { Title } = Typography;

const imgSrcs = [ 
  'https://img2.baidu.com/it/u=1113474673,4039406055&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=286',
  'https://img2.baidu.com/it/u=3193356264,2862693267&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=296',
  'https://img1.baidu.com/it/u=3565423982,992058051&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=411',
  'https://img0.baidu.com/it/u=1658065928,4021342434&fm=253&fmt=auto&app=138&f=JPEG?w=788&h=500',
  'https://img1.baidu.com/it/u=2032103189,2733056855&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=337',
  'https://img1.baidu.com/it/u=660409046,4124568497&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
  'https://img1.baidu.com/it/u=1631084795,2318730180&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
  'https://img1.baidu.com/it/u=2032103189,2733056855&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=337',
  'https://img1.baidu.com/it/u=597026529,1427848877&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375',
  'https://img1.baidu.com/it/u=1326009335,3148282558&fm=253&fmt=auto&app=138&f=JPEG?w=734&h=500',
]

const avatarLists = [ 
  'https://img2.baidu.com/it/u=889349665,2887610530&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
  'https://img0.baidu.com/it/u=3986927168,4079101108&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
  'https://img0.baidu.com/it/u=879861520,723007625&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
  'https://img1.baidu.com/it/u=4239279860,1075221172&fm=253&fmt=auto&app=138&f=JPEG?w=531&h=500',
  'https://img2.baidu.com/it/u=4011952226,4190864328&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
  'https://img0.baidu.com/it/u=1250551608,2180019998&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
  'https://img0.baidu.com/it/u=4065107391,2142799144&fm=253&fmt=auto&app=138&f=JPEG?w=527&h=500',
  'https://img2.baidu.com/it/u=832238504,362050260&fm=253&fmt=auto&app=138&f=JPEG?w=520&h=500',
  'https://img1.baidu.com/it/u=3393614753,2638302835&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
  'https://img0.baidu.com/it/u=422294360,923792397&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
]
const titles = [
  '水体污染',
  '垃圾乱堆污染',
  '水资源枯竭',
  '有毒气体排放', 
  '固体污染物污染水源',
  '自然山火大气污染',
  '耕地垃圾污染',
  '烧毁麦秸导致污染',
  '村镇垃圾收集不集中',
  '耕地重金属污染',
]
const descriptions = [
  '水体污染,水体排入有毒液体，水体鱼类死亡',
  '垃圾乱堆污染导致土地资源受到污染',
  '水资源枯竭,耕地的产值骤降',
  '有毒气体排放导致雾霾,酸雨降落', 
  '固体污染物污染水源无法进行处理饮用',
  '自然山火大气污染,温室气体增加',
  '耕地垃圾污染,耕地产量减少甚至无法生产粮食',
  '建筑垃圾乱倾倒,管理不善,造成污染和道路拥挤',
  '灞河旁边化工厂乱排废水,河流污染严重',
  '火力发电厂目前普遍存在脱硫不达标问题',
]
const contenter = [
  '水体污染',
  '垃圾乱堆污染',
  '水资源枯竭',
  '有毒气体排放', 
  '固体污染物污染水源',
  '自然山火大气污染',
  '耕地垃圾污染',
]



export default class extends Component {
  constructor() {
    super();
    this.state = {
      listData:[],
    };
  }

  componentDidMount() {
    window.scrollTo(0, 0);
    this.getListDat();
  }

  collect =(id, type) =>{
    let list = this.state.listData;
    list.forEach(it => {
      if(type == 1){
        if(id == it.key){
          if(it.iconStatus == true){
            it.icon--;
            
          }else{
            it.icon++;
          }
          it.iconStatus = !it.iconStatus;
        }
      }else if(type == 2){
        if(id == it.key){
          if(it.icon2Status == true){
            it.icon2--;
            
          }else{
            it.icon2++;
          }
          it.icon2Status = !it.icon2Status;
        }
      }else if(type == 3){
        if(id == it.key){
          if(it.icon3Status == true){
            it.icon3--;
            
          }else{
            it.icon3++;
          }
          it.icon3Status = !it.icon3Status;
        }
      }

    });
    this.setState({listData:list})
  }

  getListDat = () =>{
    const listData = [];
    let timer =  dateFormater("YYYY-mm-dd HH:MM:SS",new Date());
    for (let i = 0; i < 13; i++) {
      listData.push({
        key: `key${i}`,
        href: 'https://ant.design',
        icon: Math.floor(Math.random() * 100),
        iconStatus: i% 2  == 0 ? false : true,
        icon2: Math.floor(Math.random() * 100),
        icon2Status: i% 3  == 1 ? false : true,
        icon3: Math.floor(Math.random() * 100),
        icon3Status: i% 4  == 2 ? false : true,
        title: titles[Math.floor(Math.random() * 8)],
        avatar: avatarLists[Math.floor(Math.random()*11)],
        imgsSrc: imgSrcs[Math.floor(Math.random() * 10)],
        description: descriptions[Math.floor(Math.random() * 10)],
        content: `${descriptions[Math.floor(Math.random() * 10)]},环境污染,对人类造成不可逆伤害`,
        timer:`20223-0${Math.floor(Math.random() * 10)}-1${Math.floor(Math.random() * 10)} 1${Math.floor(Math.random() * 10)}:2${Math.floor(Math.random() * 10)}:4${Math.floor(Math.random() * 10)}`
      });
    }
    this.setState({listData})
  }

  render() {
    const { listData } = this.state;
    return (
      <>
        <div style={{marginLeft:0}}>
          <Breadcrumbs props={this.props}></Breadcrumbs>
        </div> 
        <Divider />          
        <div style={{width:'94%',height:'100%',margin:'0 auto'}}>              
        <div>
          <div style={{overflow:'hidden',textAlign:'center'}}>
              <div style={{width:'33%',height: 150,border:'1px solid #fff',borderRadius:3,float:'left',marginRight:5}}>
                <div style={{overflow:'hidden',textAlign:'center',display:'flex',justifyContent:'space-around',marginTop:3}}>
                  <div >
                      <Card>
                        <Statistic
                            title="优良天气天数(天)"
                            value={11.28}
                            precision={2}
                            valueStyle={{ color: '#3f8600' }}
                            prefix={<ArrowUpOutlined />}
                            suffix="%"
                          />   
                        </Card>
                  </div>
                  <div>
                    <Badge.Ribbon text="下降" color="green">
                      <Card>
                        <Statistic
                            title="污染源数量(处)"
                            value={9.3}
                            precision={2}
                            valueStyle={{ color: '#cf1322' }}
                            prefix={<ArrowDownOutlined />}
                            suffix="%"
                          />  
                      </Card> 
                    </Badge.Ribbon>                          
                  </div>  
                  <div>
                      <Card>
                        <Statistic
                            title="耕地污染面积(公顷)"
                            value={1.3}
                            precision={2}
                            valueStyle={{ color: '#cf1322' }}
                            prefix={<ArrowDownOutlined />}
                            suffix="%"
                          />  
                      </Card> 
                  </div>                                
                </div>
              </div>
              <div style={{width:'33%',height: 150,border:'1px solid #efefef',borderRadius:3,float:'left',marginRight:5}}>
                <div>
                  <Statistic title="西安涉及污染企业总数" style={{marginTop:15}} value='516家' precision={1} />
                  <Button  style={{ marginTop: 0 }} type="primary">
                    已整改:489家
                  </Button>    
                  <Progress status="active" size="small" style={{marginLeft:60,color:'#f50',fontSize:10,width:150}}   format={percent => `整改率 ${percent}%`} percent={89} />             
                </div>
              </div>
              <div style={{width:'33%',height: 150,border:'1px solid #efefef',borderRadius:3,float:'left',marginRight:5}}>
                <div>
                  <Row gutter={16} style={{marginTop:36}}>
                    <Col span={12}>
                      <Statistic title="河流达标率" value={'98%'} prefix={<PieChartOutlined style={{color:'#52c41a'}}/>} />
                    </Col>
                    <Col span={12}>
                      <Statistic title="耕地达标率" value={99} suffix="/100" />
                    </Col>
                  </Row>                  
                </div>
              </div>
          </div>
        </div>
        <div style={{textAlign:'left',marginTop:20,marginBottom:10}}>
          <Title level={5}>环境污染列表</Title>
        </div>   
        <div style={{overflow:'hidden',marginBottom:50}}>   
              <List
                itemLayout="vertical"
                size="middle"
                pagination={{
                  onChange: (page) => {
                    console.log(page);
                  },
                  pageSize: 3,
                }}
                dataSource={listData}
                renderItem={item => (
                  <List.Item
                    key={item.title}
                    extra={
                      <a>
                        <Image
                          width={272}
                          preview={true}
                          height={136}
                          alt="logo"
                          src={item.imgsSrc}
                        />
                      </a>
                    }>
                    <List.Item.Meta
                      avatar={<Avatar src={item.avatar} style={{width:50,height:50}} />}
                      title={<a>{item.title}</a>}
                      description={item.description}
                    />
                    <span style={{marginLeft:6}}>{item.content}</span>
                      <div className="views">
                      <Space className="icons" onClick={()=>{this.collect(item.key,1)}}>
                          <span className={item.iconStatus == true ? 'yes' : 'no'}><StarFilled /></span>{item.icon}
                      </Space>
                      <Space className="icons" onClick={()=>{this.collect(item.key,2)}}>
                        <span className={item.icon2Status == true ? 'yidian' : 'meidian'}><LikeFilled /></span>{item.icon2}
                      </Space>
                      <Space className="icons" onClick={()=>{this.collect(item.key,3)}}>
                        <span className={item.icon3Status == true ? 'yiping' : 'weiping'}><MessageFilled /></span>{item.icon3}
                      </Space>
                      <Space className="icons">
                        <HistoryOutlined />
                        {item.timer}
                      </Space>
                      </div>
                  </List.Item>
                )}
              />                   
          </div>          
        </div>
      </>
    )
  }
}
